<template>
  <div class="syn-info-page">
    <!-- 顶部 -->
    <div class="page-header">
      <a-button type="link" class="back" @click="goBack">
        <LeftOutlined class="back-icon" />
        返回
      </a-button>
      <span class="sep">|</span>
      <span class="title">详情</span>
    </div>

    <!-- 新父级 -->
    <div class="content-area">
      <div class="form-like">
        <!-- 同义词 -->
        <div class="row">
          <div class="label">同义词：</div>
          <div class="value">
            <div class="text">{{ detail.words }}</div>
          </div>
        </div>

        <!-- 启用状态 -->
        <div class="row">
          <div class="label">启用状态：</div>
          <div class="value">
            <a-radio-group :value="detail.enabled" disabled>
              <a-radio :value="true">启用</a-radio>
              <a-radio :value="false">停用</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>

      <!-- 底部操作 -->
      <div class="page-footer">
        <div class="footer-inner">
          <a-button type="link" class="btn-edit" @click="onEdit">编辑</a-button>
          <span class="vsep">|</span>
          <a-button type="link" class="btn-back" @click="goBack">返回</a-button>
        </div>
      </div>

      <div class="bottom-gap" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { LeftOutlined } from "@ant-design/icons-vue";
import { getSynonymById } from "@/api/modules/synonym.api";

const router = useRouter();
const route = useRoute();

type Detail = { id?: string | number; words: string; enabled: boolean };
const detail = reactive<Detail>({ id: undefined, words: "", enabled: true });

function normalizeWords(input: any) {
  return String(input ?? "")
    .replace(/｜/g, "|")
    .split("|")
    .map((s) => s.trim())
    .filter(Boolean)
    .join("|");
}

function fillFromRow(row: any) {
  if (!row) return;
  detail.id = row.id ?? detail.id;
  detail.words = normalizeWords(row.words ?? row.name ?? row.querys);
  detail.enabled =
    row.enabled ?? (row.status ? row.status === "published" : detail.enabled);
}

async function fetchDetailById(id: string | number) {
  try {
    const res: any = await getSynonymById(id);
    const data = res?.data ?? res ?? {};
    detail.id = data.id;
    detail.words = normalizeWords(data.querys);
    detail.enabled = (data.status ?? "draft") === "published";
  } catch {}
}

function parseRowQuery(): any | null {
  const raw = route.query.row as string | undefined;
  if (!raw) return null;
  try {
    return JSON.parse(decodeURIComponent(raw));
  } catch {
    return null;
  }
}

async function init() {
  const row = parseRowQuery();
  if (row) fillFromRow(row);

  const idParam = (route.query.id as string) ?? row?.id;
  if (idParam != null && idParam !== "") {
    await fetchDetailById(idParam);
  }
}

onMounted(init);
watch(
  () => route.query.id,
  () => init()
);

/** 返回 */
function goBack() {
  const tab = (route.query.tab as string) || "synonym";
  const backTo = route.query.backTo as string;
  if (backTo === "tab") {
    router.push({ path: "/", query: { tab } });
  } else {
    router.back();
  }
}

/** 编辑 */
function onEdit() {
  const tab = (route.query.tab as string) || "synonym";
  router.push({
    path: "/synonymFormEdit",
    query: {
      tab,
      backTo: "tab",
      id: String(detail.id ?? ""),
      row: encodeURIComponent(JSON.stringify(detail)),
    },
  });
}
</script>

<style lang="less" scoped>
@pad-x: 24px;
@wrap-max: 720px;
@label-w: 88px;  
@safe-bottom: env(safe-area-inset-bottom);

/* 外层不滚动 */
.syn-info-page {
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  :deep(.ant-*) { font-family: inherit; }

  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;

  /* 顶部 */
  .page-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px @pad-x;
    border-bottom: 1px solid #f0f0f0;
    flex: 0 0 auto;

    .back.ant-btn {
      display: inline-flex;
      align-items: center;
      padding-left: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      color: #81889c;

      .back-icon { font-size: 16px; line-height: 1; color: inherit; }
    }

    .sep { height: 24px; line-height: 24px; color: #d9d9d9; user-select: none; }

    .title { height: 24px; line-height: 24px; font-weight: 500; font-size: 16px; color: #000; }
  }

  /* 新父级滚动容器： */
  .content-area {
    flex: 1 1 auto;
    min-height: 0;         
    display: flex;
    flex-direction: column;
    overflow-y: auto;      
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + @safe-bottom);

    /* 自定义滚动条 */
    &::-webkit-scrollbar { width: 10px; height: 10px; }
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 6px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    &::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
    &::-webkit-scrollbar-track { background: transparent; }
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.25) transparent;
    scrollbar-gutter: stable;
  }

  /* 内容区 */
  .form-like {
    padding: 24px @pad-x 0 140px; 

    .row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-height: 24px;
      margin: 0 0 24px 0;
      width: 100%;
      max-width: (@wrap-max + @label-w); 
    }

    .label {
      width: @label-w;
      height: 24px;
      line-height: 24px;
      color: #333;
      font-size: 14px;
      flex: 0 0 auto;
    }

    .value {
      flex: 1 1 auto;
      font-size: 14px;

      .text { white-space: pre-wrap; word-break: break-all; }
    }
  }

  /* 底部操作栏 */
  .page-footer {
    position: static;
    margin-top: 16px;
    padding: 12px @pad-x calc(12px + @safe-bottom) @pad-x;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);

    .footer-inner {
      width: 100%;
      max-width: (@wrap-max + @label-w);
      margin: 0 auto;                   
      display: flex;
      align-items: center;
      justify-content: center;          
      gap: 12px;
      flex-wrap: wrap;
      text-align: center;
    }

    .vsep {
      color: #e5e7eb;
      user-select: none;
      line-height: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      margin: 0 2px;
    }

    /* 两个按钮统一尺寸 */
    .btn-edit,
    .btn-back {
      height: 36px;
      // min-width: 108px;
      padding: 0 20px;
      border-radius: 8px;
      font-weight: 600;
      transition: box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .btn-edit {
      background: #1677ff !important;
      border: 1px solid #1677ff !important;
      color: #fff !important;
      &:hover { filter: brightness(1.02); box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2); }
    }

    .btn-back {
      background: #fafafa !important;
      border: 1px solid #e8e8e8 !important;
      color: #666 !important;
      &:hover { background: #fff !important; color: #595959 !important; border-color: #d9d9d9 !important; }
    }
  }

  .bottom-gap { height: 8px; }

  /* 小屏优化 */
  @media (max-width: 576px) {
    .page-header { padding: 16px 12px; }
    .form-like   { padding: 16px 12px 0 12px; }
    .page-footer { padding-left: 12px; padding-right: 12px; }
    .page-footer .footer-inner { max-width: none; }
  }
}

/* 如模板仍残留旧分隔线类名，统一隐藏 */
.top-divider,
.bottom-divider { display: none; }
</style>
